<template>
<!-- :key="index" -->
  <div class="menu-tree">
    <template v-for="(menu, index) in this.menuData"> 
      <el-submenu :key="`${index}`" :index="`${index}`" v-if="menu.children.length > 0">
          <template slot="title">
              <i :class="menu.icon"></i>
              <span slot="title">{{$t(menu.name)}}</span>
          </template>
          <MenuTree :menu-data="menu.children"></MenuTree>
      </el-submenu>
      <el-menu-item :key="menu.url" :index="menu.url" v-else>
          <span slot="title">{{$t(menu.name)}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
 
<script>
export default {
  name: 'MenuTree',
  props: {
    menuData: {
      type: Array,
      default: () => {return []}
    }
  }
}
</script>
<style lang="scss">
  
</style>
